
import React,{Component,Fragment} from 'react';
import "../../../node_modules/video-react/dist/video-react.css"; // 引入视频css
import VideoPlayer from './video-player';   
import VideoBarShow from './video-bar-show';
import {connect} from 'react-redux';
import {getVideoMarkline} from '../../redux/actions';


class OpenSmallWindow extends Component{

  constructor(props) {
    super(props);
    this.windowH = document.body.clientHeight;
    this.windowW = document.body.clientWidth;
    this.state = {
        styleTop: 160,
        styleLeft: 0,
        styleHeight: props.height || this.windowH * 0.35,  // 0.85
        styleWidth: props.width || this.windowW * 0.35,  //0.45
    }
  }
  //计算是否超出屏幕
  InWindow = (left, top, startPosX, startPosY) => {
    let H = document.body.clientHeight;
    let W = document.body.clientWidth;
    if ((left < 20 && startPosX > left) || (left > W - 20 && startPosX < left) ||
        (top < 20 && startPosY > top) || ((top > H - 20 && startPosY < top))) {
        return false
    }
    return true
  }
  onMouseDown = e => {
      e.preventDefault();
      let startPosX = e.clientX;
      let startPosY = e.clientY;
      const { styleLeft, styleTop } = this.state;
      document.body.onmousemove = e => {
          let left = e.clientX - startPosX + styleLeft;
          let top = e.clientY - startPosY + styleTop;
          if (this.InWindow(e.clientX, e.clientY, startPosX, startPosY)) {
              this.setState({
                  styleLeft: left,
                  styleTop: top,
              })
          } else {
              document.body.onmousemove = null;
              document.body.onmouseup = null;
          }
      };
      document.body.onmouseup = function () {
          document.body.onmousemove = null;
          document.body.onmouseup = null;
      };
  };
  componentWillUnmount(){
    this.props.getVideoMarkline(0);
  }

  render(){
    const { styleLeft, styleTop, styleHeight, styleWidth } = this.state
    const { visible, onClose, children, bodyStyle, title } = this.props
    return (
    <div 
      className="open-small-window-wrapper"
      style={{display: visible ? "block" : "none",left: styleLeft + 'px', top: styleTop + 'px'}}
    >
      <div className="header">
          <div className="title" onMouseDown={this.onMouseDown} style={{color:'rgb(165,173,180)'}}>{title}</div>
          <i className="iconfont close" onClick={onClose} style={{color:'rgb(165,173,180)'}}>&#xe62b;</i>
      </div>
      <div className="content" style={{ ...bodyStyle }}>
        {title==='视频播放'? <VideoPlayer 
                              handleRemoveAuto={this.props.handleRemoveAuto} 
                              //videoId={this.props.videoId}
                            /> 
                          : <VideoBarShow
                             //videoId={this.props.videoId} 
                            /> }
      </div>
    </div>
    )
  }
}

export default connect(
  state => ({ }),
  {getVideoMarkline}
)(OpenSmallWindow);













{/* <Fragment>
  <div style={{ width: 500, height: 300}}>
    <Player
      ref={c => {this.player = c;}}
      //poster="https://video-react.js.org/assets/poster.png"   // 视频封面图片
    >
      <source
        src={path}   // 视频路径
        type="video/mp4"  // 视频类型
      />
      <ControlBar autoHide={false} disableDefaultControls={false}>
        <ReplayControl seconds={5} order={1.1} />
        <ForwardControl seconds={5} order={1.2} />
        <PlayToggle />    
        <CurrentTimeDisplay order={4.1} />
        <TimeDivider order={4.2} />
        <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
        <VolumeMenuButton vertical/>
      </ControlBar>
  </Player>
  </div>
</Fragment> */}


